import React, { useState, useEffect, useCallback } from "react";
import "./index.css";
import axios from "axios";
import { message } from "antd";
import MediaTable from "./MediaTable";
import SearchMedia from "./SearchMedia";
import AddInfo from "./AddInfo";

const request = axios.create({
    baseURL: "http://106.55.48.147:5000/",
});

const UserMedia: React.FC = (): React.ReactElement => {
    const [userdata, setUserdata] = useState<any>([]);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [cancelModalVisible, setCancelModalVisible] = useState(true);

    const [pagination, setPagination] = useState<any>({
        page_num: 1,
        page_size: 8,
    });
    const [pageinfo, setPageinfo] = useState({
        page_num: 0,
        page_size: 0,
        total: 0,
    });

    useEffect(() => {
        GetdataList();
    }, [pagination]); // eslint-disable-line react-hooks/exhaustive-deps


    const GetdataList = async () => {
        let { data: res } = await request.get("Getvideo", {
            params: {
                page_num: pagination.page_num,
                page_size: pagination.page_size,
            },
        });
        let arr = [];
        res.data.forEach((item: any) => {

            if (item.MediaType === '图片') {
                arr = item.Media.split(" ");
                arr.pop();
                item.Imagelist = arr;

            }
        })
        console.log(res.data);

        setUserdata(res.data);
        // res.paging
        setPageinfo(res.paging);
    };

    const onPageChange = (page: any) => {
        setPagination(page);
        console.log(page);
    };
    const onAddInfo = useCallback(async (val: any, form) => {

        try {
            delete val.upload;
            const { data: res } = await request.post("AddmediaData", val);
            if (res.status === 200) {
                message.success("上传成功！", 3);
                form.resetFields();
                // GetdataList();
                setIsModalVisible(false);
            }
        } catch (error) {
            message.error("数据提交异常！", 3)
        }

    }, []); // eslint-disable-line react-hooks/exhaustive-deps

    const onCancel = useCallback((val: boolean) => {
        setIsModalVisible(val);
    }, []);
    const onRemove = useCallback(
        async (id: number) => {
            const { data: res } = await request.get("RemoveMedia", {
                params: { id: id },
            });

            if (res.status === 200) {
                message.success("删除成功！", 3);
                GetdataList();
            }   
            /*let index = userdata.filter((todo: any) => todo.vidID !== id);
            setUserdata(index);*/
        },
        [userdata] // eslint-disable-line react-hooks/exhaustive-deps
    );
    const onEdit = useCallback(async (val: any) => {

        val.date = new Date();
        const { data: res } = await request.post("EditmediaData", val);
        console.log(res);
        if (res.status === 200) {
            setCancelModalVisible(false);
            message.success("数据修改成功！", 3);
            GetdataList();
        }
    }, [userdata]);// eslint-disable-line react-hooks/exhaustive-deps

    const onSearch = useCallback((val: any) => {
        console.log(val);
        if (val === '') {
            GetdataList();
        } else {
            const list = userdata.filter((item: any) => {
                return item.message.indexOf(val) > -1;
            });
            setUserdata(list);
        }

    }, [userdata])// eslint-disable-line react-hooks/exhaustive-deps

    return (
        <div className="user_media">

            <AddInfo
                isModalVisible={isModalVisible}
                onReset={(e: any) => {
                    e.resetFields();

                }}
                onCancel={onCancel}
                onAddInfo={onAddInfo}
            />
            <SearchMedia onSearch={onSearch} />

            <MediaTable
                userData={userdata}
                onPageChange={onPageChange}
                pageInfo={pageinfo}
                onRemove={onRemove}
                onEdit={onEdit}
                cancelModalVisible={cancelModalVisible}
            />
        </div>
    );
};

export default UserMedia;
